<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        FLV播放器
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
        :modal-class="my-modal"
        dialog-class="modal-dialog"
        @hidden 关闭窗体触发事件
    -->
    <b-modal ref="my-modal" :title="title" scrollable content-class="fullWinBody" @hidden="onHidden" size="fullWin" centered
        no-close-on-backdrop>
        <div class="d-block text-center">
            <div class="mainContainer">
                <!--
                说明：
                controls：如果该选项不配置 则屏蔽loading条
                autoplay：自动播放
                muted：屏蔽声音
                <video id="videoElement" class="video" controls autoplay muted>您的浏览器太旧，不支持HTML5视频。</video>
                -->
                <div class="loadMsg" v-if="loadMsg == false">
                    <svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="38"
                        height="38" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
                        <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6"
                            fill="grey">拼命加载中...
                            <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite" />
                        </text>
                        <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
                            C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
                            C34.797,11.841,28.159,5.203,20,5.203z">
                        </path>

                        <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
                            S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
                            S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
                        </path>
                        <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10"
                            d="M5.203,20
			                    c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
                            <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
                                calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s"
                                repeatCount="indefinite" />
                        </path>
                        <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
                              c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
                              C12.875,32.922,7.078,27.125,7.078,20z">
                            <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
                                dur="1.8s" repeatCount="indefinite" />
                        </path>
                    </svg>
                </div>
                <video id="videoElement" class="video" autoplay muted>您的浏览器太旧，不支持HTML5视频。</video>
            </div>
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
            <el-select v-model="speed" placeholder="倍速" style="width: 100px;">
                <el-option v-for="item in speedOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <button type="button" onmousedown="controlPTZ(1,'UP_LEFT')" title="左上" onmouseup="controlPTZ(0,'UP_LEFT')"
                class="btn btn-secondary">
                ↖
            </button>
            <button type="button" onmousedown="controlPTZ(1,'TILT_UP')" title="向上" onmouseup="controlPTZ(0,'TILT_UP')"
                class="btn btn-secondary">
                ↑
            </button>
            <button type="button" onmousedown="controlPTZ(1,'UP_RIGHT')" title="右上" onmouseup="controlPTZ(0,'UP_RIGHT')"
                class="btn btn-secondary">
                ↗
            </button>

            <button type="button" onmousedown="controlPTZ(1,'PAN_LEFT')" title="向左" onmouseup="controlPTZ(0,'PAN_LEFT')"
                class="btn btn-secondary">
                ←
            </button>
            <button type="button" onmousedown="controlPTZ(1,'DOWN_LEFT')" title="左下" onmouseup="controlPTZ(0,'DOWN_LEFT')"
                class="btn btn-secondary">
                ↙
            </button>

            <button type="button" onmousedown="controlPTZ(1,'TILT_DOWN')" title="向下" onmouseup="controlPTZ(0,'TILT_DOWN')"
                class="btn btn-secondary">
                ↓
            </button>
            <button type="button" onmousedown="controlPTZ(1,'DOWN_RIGHT')" title="右下" onmouseup="controlPTZ(0,'DOWN_RIGHT')"
                class="btn btn-secondary">
                ↘
            </button>
            <button type="button" onmousedown="controlPTZ(1,'PAN_RIGHT')" title="向右" onmouseup="controlPTZ(0,'PAN_RIGHT')"
                class="btn btn-secondary">
                →
            </button>

            <button type="button" onmousedown="controlPTZ(1,'ZOOM_IN')" title="放大" onmouseup="controlPTZ(0,'ZOOM_IN')"
                class="btn btn-secondary">
                <i class="la la-plus"></i>
            </button>
            <button type="button" onmousedown="controlPTZ(1,'ZOOM_OUT')" title="缩小" onmouseup="controlPTZ(0,'ZOOM_OUT')"
                class="btn btn-secondary">
                <i class="la la-minus"></i>
            </button>
            <button type="button" onmousedown="controlPTZ(0,'ZOOM_OUT')" title="停止转动" onmouseup="controlPTZ(0,'ZOOM_OUT')"
                class="btn btn-secondary">
                <i class="la la-pause"></i>
            </button>

            <button type="button" id="transcribe" title="录屏或停止" block @click="transcribeVideo" class="btn btn-light-info font-weight-bold mr-2">
                {{ transcribeText }}
            </button>
            <button type="button" title="截图" block @click="screenShot" class="btn btn-light-success font-weight-bold mr-2">
                截图
            </button>
            <button type="button" class="btn btn-light-primary font-weight-bold mr-2" block @click="hideModal">
                <i class="icon-xl fa fa-times"></i>关闭窗体
            </button>
        </template>
    </b-modal>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
import flvjs from 'flv.js';
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            title: "实时监控",
            device_id: "",
            loadMsg: true,
            transcribeText: '录屏',
            iframeSrc: process.env.BASE_URL + "deng/view/iot/graph-preview/index.html",
            height: KTUtil.getViewPort().height - 120,
            videoElement: null,
            flvPlayer: null,
            httpURL: null,
            IntervalTimer: null,
            sameframesCount: 0,
            lastDecodedFrame: 0,
            speed: "1",
            speedOptions: [
                {
                    value: '1',
                    label: '倍速1'
                }, {
                    value: '2',
                    label: '倍速2'
                }, {
                    value: '3',
                    label: '倍速3'
                }, {
                    value: '4',
                    label: '倍速4'
                }, {
                    value: '5',
                    label: '倍速5'
                }
            ],
            controlForm: { start: null, pztType: null },
        }
    },
    components: {
    },
    watch: {
    },
    mounted() {

    },
    methods: {
        showModal(row) {
            this.$refs['my-modal'].show();
            this.device_id = "";
            this.title = "实时监控";
            this.iframeSrc = process.env.BASE_URL + "deng/view/iot/graph-preview/index.html";
            if (null != row && undefined != row) {
                this.device_id = row.device_id;
                this.title = "实时监控【" + row.name + "】";
                this.iframeSrc = process.env.BASE_URL + "deng/view/iot/graph-preview/index.html?graph_site_id=" + row.graph_site_id
            }
            setTimeout(() => {
                apiUtil.get(process.env.VUE_APP_MONITOR_API + "/iotDevice/get/" + row.device_id).then(({ data }) => {
                    let transcribe = data.data.transcribe;
                    if (transcribe == 1) {//当前状态为停止 则可开启录制
                        this.transcribeText = '停止录屏';
                    } else {
                        this.transcribeText = '录屏';
                    }
                    apiUtil.get(process.env.VUE_APP_MONITOR_API + "/play/" + row.device_id).then(({ data }) => {
                        this.httpURL = data.data.httpURL;
                        this.loadPlay(this.httpURL);
                    });
                });
            }, 100);
        },
        hideModal() {
            this.$refs['my-modal'].hide()
        },
        toggleModal() {
            // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
            this.$refs['my-modal'].toggle('#toggle-btn')
        },
        onHidden() {//关闭窗体触发事件
            this.$emit("change", null);
            this.flvPlayer.pause();
            this.flvPlayer.unload();
            this.flvPlayer.detachMediaElement();
            this.flvPlayer.destroy();
            this.flvPlayer = null;
            this.loadMsg = false;
        },
        loadPlay(url) {
            url = "http://223.108.139.162:18000/hls/stream_5_0/playlist.m3u8";
            if (flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                    /*
                     type: 'flv',
                     url: url,
                     fitVideoSize: 'auto',
                     hasStart: true,
                     autoplay: true, //自动播放，设置自动播放必要参数
                     autoplayMuted: true, //自动播放静音，设置自动播放参数必要参数
                     volume: 0,
                     defaultMuted: true,
                     isLive: true,
                     playsinline: false,
                     screenShot: false,
                     fluid: true,
                     aspectRatio: '16:9',
                     whitelist: [''],
                     ignores: ['time'],
                     fixAudioTimestampGap: false,  //主要是这个配置，直播时音频的码率会被降低，直播游戏时背景音会有回响，但是说话声音没问题,默认值为：true。在网路允许的情况下，可以改为false。
                     closeVideoClick: false,
                     errorTips: '<span class="app-error">无视频源</span>',
                     customConfig: {
                         isClickPlayBack: false
                     },
                     flvOptionalConfig: {
                         enableWorker: true, //是否多线程工作
                         enableStashBuffer: false, //启用缓存
                         stashInitialSize: 128, //默认384kb
                         lazyLoad: false,
                         lazyLoadMaxDuration: 40 * 60,
                         autoCleanupSourceBuffer: true, //自动清除缓存
                         autoCleanupMaxBackwardDuration: 35 * 60,
                         autoCleanupMinBackwardDuration: 30 * 60,
                         reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
                     }
                     */
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    hasVideo: true,
                    url: url,
                    fixAudioTimestampGap: false,  //主要是这个配置，直播时音频的码率会被降低，直播游戏时背景音会有回响，但是说话声音没问题,默认值为：true。在网路允许的情况下，可以改为false。
                    enableWorker: true, // 是否多线程工作
                    enableStashBuffer: false, // 是否启用缓存
                    stashInitialSize: 256 // 缓存大小(kb)  默认384kb
                }, {
                    autoCleanupSourceBuffer: true,//对SourceBuffer进行自动清理
                    autoCleanupMaxBackwardDuration: 5,//    当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
                    autoCleanupMinBackwardDuration: 2,//指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
                    enableStashBuffer: false, //关闭IO隐藏缓冲区
                    isLive: true,
                    lazyLoad: false,
                });
                this.videoElement = document.getElementById('videoElement');
                this.flvPlayer.attachMediaElement(this.videoElement);
                this.flvPlayer.load(); //加载
                this.flvPlayer.play();
                // $(".img-tu").css("display", "none");
                // $(".load").hide();
            }

            setTimeout(function () {
                if (undefined != this.flvPlayer && null != this.flvPlayer) {
                    this.flvPlayer.play();
                }
            }, 2000);

            this.IntervalTimer = setInterval(function () {
                if (undefined != this.flvPlayer && null != this.flvPlayer) {
                    if (!this.videoElement.buffered.length) {
                        return;
                    }
                    let end = this.videoElement.buffered.end(0);
                    let diff = end - this.videoElement.currentTime;

                    // videoElement.currentTime = videoElement.buffered.end(0);

                    //暂时注释以下代码 采用上述时间追帧方式
                    const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
                    let diffSpeedUp = 0.5; // 这里设置了超过1秒以上则进行视频加速播放
                    let maxPlaybackRate = 4;// 自定义设置允许的最大播放速度
                    let playbackRate = 1.0; // 播放速度
                    if (diff > diffCritical) {
                        this.videoElement.currentTime = end - 0.1;
                        playbackRate = Math.max(1, Math.min(maxPlaybackRate, 16));
                        console.log("相差超过4秒，进行跳转,加速度：", playbackRate, ",相差时间：", diff - diffCritical);
                    } else if (diff > diffSpeedUp) {
                        playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16))
                        // console.log("相差超过1秒，进行加速,加速度：",playbackRate,",相差时间：",diff-diffSpeedUp);
                    }
                    this.videoElement.playbackRate = playbackRate;
                    /*if (videoElement.paused) {
                        flvPlayer.play()
                    }*/
                }
            }, 1000);


            // flvPlayer.on('error', err => {
            //     console.log('err', err);
            // });



            /**
             * 监听媒体信息事件
             */
            this.flvPlayer.on(flvjs.Events.MEDIA_INFO, (res) => {
                console.log("媒体信息")
            });

            /**
             * 加载完成监听事件
             */
            this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, (res) => {
                // $(".loadMsg").css("display","flex");
                console.log("加载完成")
            });

            /**
             * 监听获取元数据事件
             */
            this.flvPlayer.on(flvjs.Events.METADATA_ARRIVED, (res) => {
                console.log("获取元数据")
            });

            /**
             * 监听恢复早期EOF事件
             */
            this.flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, (res) => {
                console.log("恢复早期EOF")
            });

            /**
             * 监听获取到脚本数据事件
             */
            this.flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (res) => {
                console.log("获取到脚本数据")
            });

            /**
             * 参考网上：
             * 视频直播时,有时候会遇到视频loading,卡顿,
             * 有可能是本地网络波动或者服务端流断开,
             * 我们可以通过监听flvjs.Events.ERROR来判断连接是否已经断开,继而进行断流重连,
             * 代码如下:
             */
            this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
                console.log("errorType:", errorType);
                console.log("errorDetail:", errorDetail);
                console.log("errorInfo:", errorInfo);
                // $(".loadMsg").css("display", "flex");
                this.loadMsg = true;
                //视频出错后销毁重新创建
                if (this.flvPlayer) {
                    this.flvPlayer.pause();
                    this.flvPlayer.unload();
                    this.flvPlayer.detachMediaElement();
                    this.flvPlayer.destroy();
                    this.flvPlayer = null;
                    /*
                    flvPlayer = flvjs.createPlayer(videoElement, this.url);
                    */
                    if (this.IntervalTimer) {
                        clearInterval(this.IntervalTimer);
                    }
                    this.loadPlay(this.httpURL)
                }
            });

            /**
            this.flvPlayer.on(flvjs.Events.MEDIA_SOURCE_CLOSE, (errorType, errorDetail, errorInfo) => {
                console.log("进入MEDIA_SOURCE_CLOSE.....", errorType);
                //视频出错后销毁重新创建
                if (this.flvPlayer) {
                    this.flvPlayer.pause();
                    this.flvPlayer.unload();
                    this.flvPlayer.detachMediaElement();
                    this.flvPlayer.destroy();
                    this.flvPlayer= null;
                    if(this.IntervalTimer){
                        clearInterval(this.IntervalTimer);
                    }
                    this.loadPlay(this.httpURL)
                }
            });
        
            this.flvPlayer.on(flvjs.Events.VIDEO_RESOLUTION_CHANGED, (errorType, errorDetail, errorInfo) => {
                console.log("进入VIDEO_RESOLUTION_CHANGED.....", errorType);
                //视频出错后销毁重新创建
                if (this.flvPlayer) {
                    this.flvPlayer.pause();
                    this.flvPlayer.unload();
                    this.flvPlayer.detachMediaElement();
                    this.flvPlayer.destroy();
                    this.flvPlayer= null;
                    if(this.IntervalTimer){
                        clearInterval(this.IntervalTimer);
                    }
                    this.loadPlay(this.httpURL)
                }
            });
        
            this.flvPlayer.on(flvjs.Events.VIDEO_FROZEN, (errorType, errorDetail, errorInfo) => {
                console.log("进入VIDEO_FROZEN.....", errorType);
                //视频出错后销毁重新创建
                if (this.flvPlayer) {
                    this.flvPlayer.pause();
                    this.flvPlayer.unload();
                    this.flvPlayer.detachMediaElement();
                    this.flvPlayer.destroy();
                    this.flvPlayer= null;
                    if(this.IntervalTimer){
                        clearInterval(this.IntervalTimer);
                    }
                    this.loadPlay(this.httpURL)
                }
            });
            **/


            /**
             * 参考网上：
             * 如果控制台没有错误信息,而且查看network发现视频流没有断开,
             * 但是画面一直在loading或者卡住不动,我这边的原因是服务端推流突然断开,
             * 然后在很快的时间内继续推流,这个时候因为客户端的超时时间还没有结束,流会继续推送到原链接,
             * 这个时候我们的视频会卡在掉线的那个时间,不会继续播放.这个时候我们就需要监听推流的decodedFrame,
             * 如果decodedFrame不再发生变化,我们就销毁掉该实例并进行重新连接,
             * 代码如下:
             */
            this.flvPlayer.on("statistics_info", function (res) {
                if (this.lastDecodedFrame == 0) {
                    // console.log("statistics_info=0");
                    // $(".loadMsg").css("display", "flex");
                    this.loadMsg = true;
                    this.lastDecodedFrame = res.decodedFrames;
                    return;
                }
                if (this.lastDecodedFrame != res.decodedFrames) {
                    // console.log("statistics_info=1");
                    // $(".loadMsg").css("display", "none");
                    this.loadMsg = false;//隐藏
                    this.lastDecodedFrame = res.decodedFrames;
                    this.sameframesCount = 0;
                } else {
                    this.sameframesCount++;
                    if (this.sameframesCount >= 10) {
                        // $(".loadMsg").css("display", "flex");
                        this.loadMsg = true;
                        console.log("decodedFrames没有发生变化第", this.sameframesCount, "次，时间：", new Date(), "");
                        console.log("statistics_info", res.decodedFrames, this.lastDecodedFrame);
                        console.log("画面卡死，重新连接，时间：", new Date(), "");
                        this.lastDecodedFrame = 0;
                        this.sameframesCount = 0;
                        if (this.flvPlayer) {
                            this.flvPlayer.pause();
                            this.flvPlayer.unload();
                            this.flvPlayer.detachMediaElement();
                            this.flvPlayer.destroy();
                            this.flvPlayer = null;
                            /*
                            flvPlayer = flvjs.createPlayer(videoElement, this.url);
                            */
                            if (this.IntervalTimer) {
                                clearInterval(this.IntervalTimer);
                            }
                            this.loadPlay(this.httpURL);
                        }
                    }
                }
            });
        },
        flv_start() {//开始播放
            if (null != this.flvPlayer && undefined != this.flvPlayer) {
                this.flvPlayer.play();
            }
        },
        flv_pause() {//暂停
            if (null != this.flvPlayer && undefined != this.flvPlayer) {
                this.flvPlayer.pause();
            }
        },
        play(id, name, tag) {
            // if (tag == 'QCAM' || tag == 'YCAM') {
            //     this.ptzBase(false);
            // } else {
            //     this.ptzBase(true);
            // }
        },
        controlPTZ(start, pztType) {
            this.controlForm.start = start;
            this.controlForm.pztType = pztType;
            apiUtil.post(process.env.VUE_APP_MONITOR_API + "/ptz/control", this.controlForm).then(({ data }) => {
                if (data.success) {
                } else {
                    handleAlert("操作失败", "error", 3);
                }
            });
        },
        screenShot() {//截图
            apiUtil.get(process.env.VUE_APP_MONITOR_API + "/screenShot/" + this.device_id).then(({ data }) => {
                handleAlert("操作成功", "success", 3);
            });
        },
        transcribeVideo() {//录屏
            apiUtil.get(process.env.VUE_APP_MONITOR_API + "/iotDevice/get/" + this.device_id).then(({ data }) => {
                let transcribe = data.data.transcribe;
                if (transcribe == 0 || transcribe == null || transcribe == '') {//当前状态为停止 则可开启录制
                    this.$confirm("确定录制视频?", "提示", { type: "warning", }).then(() => {
                        apiUtil.get(process.env.VUE_APP_MONITOR_API + "/transcribe/" + this.device_id).then(({ data }) => {
                            if (data.data.success) {
                                this.transcribeText = '停止录制'
                                handleAlert("录制成功", "success", 3);
                            } else {
                                handleAlert("录制失败", "error", 3);
                            }
                        });
                    }).catch(() => { });//注意这里，这里是重点！！！;        
                }
                if (transcribe == 1) {
                    this.$confirm("确定暂停录制视频?", "提示", { type: "warning", }).then(() => {
                        apiUtil.get(process.env.VUE_APP_MONITOR_API + "/transcribe/" + this.device_id).then(({ data }) => {
                            if (data.data.success) {
                                this.transcribeText = '录屏'
                                handleAlert("停止录制成功", "success", 3);
                            } else {
                                handleAlert("停止录制失败", "error", 3);
                            }
                        });
                    }).catch(() => { });//注意这里，这里是重点！！！;      
                }
            });
        },
    }
}
</script>
<style scoped>
.mainContainer {
    background-color: currentcolor;
    display: block;
    width: 100%;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
}

.mainContainer .loadMsg {
    background-color: currentcolor;
    position: absolute;
    margin: 0 auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-perspective: 600;
    perspective: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainContainer .loadMsg svg {
    width: 160px;
    height: 160px;
}

.dc-logo {
    position: fixed;
    right: 10px;
    bottom: 10px;
}

.dc-logo:hover svg {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

.dc-logo:hover:hover:before {
    content: '\2764';
    padding: 6px;
    font: 10px/1 Monaco, sans-serif;
    font-size: 10px;
    color: #00fffe;
    text-transform: uppercase;
    position: absolute;
    left: -70px;
    top: -30px;
    white-space: nowrap;
    z-index: 20px;
    box-shadow: 0px 0px 4px #222;
    background: rgba(0, 0, 0, 0.4);
}

.dc-logo:hover:hover:after {
    content: 'Digital Craft';
    padding: 6px;
    font: 10px/1 Monaco, sans-serif;
    font-size: 10px;
    color: #6E6F71;
    text-transform: uppercase;
    position: absolute;
    right: 0;
    top: -30px;
    white-space: nowrap;
    z-index: 20px;
    box-shadow: 0px 0px 4px #222;
    background: rgba(0, 0, 0, 0.4);
    background-image: none;
}

@-webkit-keyframes arrow-spin {
    50% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes arrow-spin {
    50% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

.video {
    display: block;
    width: 100%;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}

.alert {
    border-radius: 0;
    border-radius: 4px;
}

.alert {
    position: relative;
    padding: 0px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}



/* 隐藏播放、暂停等各类播放器功能按钮 */
video::-webkit-media-controls-fullscreen-button {
    display: none;
}

video::-webkit-media-controls-play-button {
    display: none;
}

video::-webkit-media-controls-timeline {
    display: none;
}

video::-webkit-media-controls-current-time-display {
    display: none;
}

video::-webkit-media-controls-time-remaining-display {
    display: none;
}

video::-webkit-media-controls-mute-button {
    display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
}

video::-webkit-media-controls-volume-slider {
    display: none;
}

video::-webkit-media-controls-enclosure {
    display: none;
}

/* 视频全铺 */
/*.video{
        object-fit: fill;
    }*/</style>